<template>
    <div>
        <div>
            <search-cmp/>
        </div>
        <div style="margin-top:5px">
        <el-carousel :interval="4000" type="card" height="90px">
            <el-carousel-item v-for="(item,i) in this.blist" :key="i">
                <img :src="item.picStr"/>
            </el-carousel-item>
        </el-carousel>
        </div>
        <div class="spl">
            <div class="sp">
                <img src="http://p3.music.126.net/UKhDHWnEMmoOo27PQmDPbA==/19117208672446378.jpg" style="width:41px;height:35px">
                <span style="font-size:10px;"><strong>热销爆品</strong></span>
            </div>
            <div class="sp">
                <img src="http://p4.music.126.net/tKMAm5OvR-2lAj7dnEOhsg==/18623527952924939.jpg" style="width:41px;height:35px">
                <span style="font-size:10px;"><strong>IP周边</strong></span>
            </div>
            <div class="sp">
                <img src="http://p3.music.126.net/PzH4QQKE5R97J9f2V-SvqQ==/18585045045959929.jpg" style="width:41px;height:35px">
                <span style="font-size:10px;"><strong>数码影音</strong></span>
            </div>
            <div class="sp">
                <img :src="img1" style="width:41px;height:35px">
                <span style="font-size:10px;"><strong>云贝商城</strong></span>
            </div>
        </div>
        <div>
            <shop-cmp style="margin-bottom:50px"/>
        </div>
    </div>
    
</template>

<script>
import SearchCmp from '../components/SearchCmp.vue'
import ShopCmp from '../components/ShopCmp.vue'
import axios from 'axios'
import img1 from '../assets/2.png'
export default {
    data(){
        return{
            blist:[],
            img1
        }
    },
    components:{
        SearchCmp,
        ShopCmp
    },
    created(){
        axios('/ms/store/api/product/ipbanner?type=0').then(
            resp=>{
                this.blist=resp.data.banners
            }
        )
    }
    

}
</script>

<style lang="scss" scoped>
  .el-carousel__item img{
    opacity: 0.75;
    margin: 0;
    width: 100%;
    
  }
  .el-carousel__item:nth-child(2n) {
    background-color: whitesmoke;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: whitesmoke;
  }
  .spl{
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid gray;
    .sp{
      display: flex;
      align-items: center;
    } 
  }

</style>